
<script type="text/javascript">
$(function () {

    $('#container').highcharts({

        chart: {
            type: 'heatmap',
            marginTop: 70,
            marginBottom: 80,
            plotBorderWidth: 1
        },


        title: {
            text: '店别商品销售比较表(依类别)',
            style: { 
                    fontWeight: 'bold',
                    fontSize: '20px', 
                    fontFamily: '微軟正黑體',
                    color:'black'
                   }
        },subtitle: {
            text: 'By杯数',
            style: { 
                    fontWeight: 'bold',
                    fontSize: '16px', 
                    fontFamily: '微軟正黑體',
                    color:'black'
                   }
        },

        xAxis: {
            categories: ['鲜活健康', '鲜奶拿铁', '新鲜特调', '夏季冰钻', '东方时尚','香醇奶茶'],
            labels: { 
                     rotation: 0, 
                     style: { 
                            fontSize: '15px', 
                            fontFamily: '微軟正黑體',
                            color:'black'
                            }
                    }
        },
        yAxis: {
            categories: ['上海店', '武汉店', '北京店', '廣州店', '重庆店'],
            title: null,
            labels: { 
                     rotation: 0, 
                     style: { 
                            fontSize: '15px', 
                            fontFamily: '微軟正黑體',
                            color:'black'
                            }
                    }
        },
        colorAxis: {
            min: 0,
            minColor: '#FFFFBB',
            maxColor: '#FFFF00'
        },

        legend: {
            align: 'right',
            layout: 'vertical',
            margin: 0,
            verticalAlign: 'top',
            y: 55,
            symbolHeight: 350
        },

        tooltip: {
            formatter: function () {
                return '<b>' + this.series.yAxis.categories[this.point.y] + '</b>' +'</b> <br><b>'
                +this.series.xAxis.categories[this.point.x] + '</b> 一共贩卖 <br><b>' +
                    this.point.value + '</b> 杯<br><b>';
            },
            style: { 
                   fontSize: '15px', 
                   fontFamily: '微軟正黑體',
                   color:'black'
                   }
        },

        series: [{
            name: '杯数',
            borderWidth: 1,
            data: [[0, 0, 110], [0, 1, 122], [0, 2, 38], [0, 3, 124], [0, 4, 168], [1, 0, 192], [1, 1, 158], [1, 2, 178], [1, 3, 216], [1, 4, 148],
                   [2, 0, 62], [2, 1, 52], [2, 2, 224], [2, 3, 164], [2, 4, 152], [3, 0, 172], [3, 1, 232], [3, 2, 214], [3, 3, 118], [3, 4, 116], 
                   [4, 0, 138], [4, 1, 106], [4, 2, 108], [4, 3, 217], [4, 4, 215], [5, 0, 188], [5, 1, 132], [5, 2, 112], [5, 3, 106], [5, 4, 220]],
            dataLabels: {
                enabled: true,
                color: '#000000'
            }
        }]

    });
});
		</script>

<div id="container" style="height: 500px; min-width: 310px; max-width: 1000px; margin: 0 auto"></div>